<template>
    <el-row>
        <el-col :span="10">
            <div style="height:calc(84vh);">
                <el-input v-model="textarea" type="textarea" placeholder="请输入json字符串" :rows="height" @input="editJson"
                    style="font-weight: bold;" />
            </div>
        </el-col>
        <el-col :span="14">
            <div style="height:calc(84vh);">
                <JsonFormater ref="jsFormater" />
            </div>
        </el-col>
    </el-row>
</template>
<script>
    import { ref, onUnmounted } from 'vue'
    import JsonFormater from '@/components/JsonFormater'

    export default {
        components: {
            JsonFormater
        },
        setup() {
            const height = ref(window.screen.height / 30);
            const textarea = ref();
            var jsFormater = ref();
            const editJson = () => {
                jsFormater.value.RenderJosnHtml(textarea.value);
            };

            return { jsFormater, textarea, height, editJson };
        }
    }
</script>

<style>

</style>